<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		.title_box{
			width: 550px;
			height: 40px;
		}
		.title{
			width: 100px;
			height: 40px;
			background: red url() 0 0 no-repeat;
			margin-right: 5px;
			float: left;
			text-align: center;
			color: #fff;
			line-height: 40px;
			cursor: pointer;
		}
		.content_box {
			width: 550px;
			height: 500px;
			position: relative;
		}
		.content{
			width: 520px;
			height: 300px;
			background: blue url() 0 0 no-repeat;
			text-align: center;
			color: #fff;
			font-size: 30px;
			line-height: 300px;
			position: absolute;
			top: 0px;
			left: 0px; 
		}
		.c2{
			background: red url() 0 0 no-repeat;
		}
		.c3{
			background: green url() 0 0 no-repeat;
		}
		.c4{
			background: yellow url() 0 0 no-repeat;
		}
		.c5{
			background: pink url() 0 0 no-repeat;
		}
	</style>
<!-- 	<script type="text/javascript">
		
		window.onload = function () {
			title =  document.getElementsByClassName("title");
			content =  document.getElementsByClassName("content");

			for (var i = 0; i <title.length; i++) {
				title[i].index = i;
				title[i].onmouseover = function () {

					for (var j = 0; j <content.length; j++) {
						content[j].style.display="none";
					}

					content[this.index].style.display="block";
				}
			}

		}
	</script> -->
<!-- 	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

	<script type="text/javascript">
		

		$(function(){
			$('.title').mouseover(function() {
				$('.content').eq($(this).index()).show().siblings().hide();
			});	
		})

	</script> -->
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			$('.title').mouseover(function(event) {
				num = $(this).index();
				$('.content').eq(num).show().siblings().hide();
			});
		})
	</script>
</head>
<body>
	<ul class="title_box">
		<li class="title">标题01</li>
		<li class="title">标题02</li>
		<li class="title">标题03</li>
		<li class="title">标题04</li>
		<li class="title">标题05</li>
	</ul>
	<ul class="content_box">
		<li class="content c1">内容01</li>
		<li class="content c2">内容02</li>
		<li class="content c3">内容03</li>
		<li class="content c4">内容04</li>
		<li class="content c5">内容05</li>
	</ul>
</body>
</html>